<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi">
	<meta charset="UTF-8">
	<title>订单详情</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/shoping.css">
	<link rel="stylesheet" href="css/unpaid.css">
	<link rel="stylesheet" href="css/dingdanContent.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/vue.js"></script>
</head>
<body>
	<!-- 头部可复用样式 -->
	<header>
		<img src="images/guanbi.png" alt="关闭">
		<p>水站商城</p>
		<img src="images/gengduo.png" alt="更多">
	</header>
	<!-- 订单详情title -->
	<div class="title">
		<a href="javascript:history.back(-1);">
			<img src="images/1-2返回.png" alt="">
		</a>
		<span>订单详情</span>
	</div>
	<div class="change">
		<!-- 订单详情 -->
		<div class="dingdanTitle">
			<p>订单号:20170711101552</p>
			<p>{{shouhuozhangtai}}</p>
		</div>
		<!-- 产品信息 -->
		<div class="products4">
			<div class="products4_line1">
				<img src="images/1-1图图1.png" alt="">
				<h4>农夫山泉系列10L</h4>
				<div style="clear: both;"></div>
				<p><span>￥17.00</span>&nbsp;元/桶&nbsp;×1</p>
				<p>合计:<span>￥17.00</span></p>
			</div>
			<div class="products4_line1">
				<img src="images/1-1图图2.png" alt="">
				<h4>哇哈哈系列10L</h4>
				<div style="clear: both;"></div>
				<p><span>￥15.00</span>&nbsp;元/桶&nbsp;×2</p>
				<p>合计:<span>￥30.00</span></p>
			</div>
			<p>总价: <span>￥45</span>元</p>
		</div>
		<!-- 个人信息 -->
		<div class="personMessage">
			<p class="name">
				联系人:张小邪
			</p>
			<p class="tel">
				电话:15805396666
			</p>
			<p class="address">
				地址:山东省临沂市兰山区瑞腾优卡空间B座
			</p>
		</div>
		<!-- 底部按钮 -->
		<button class="queren" v-on:click="changeButton" v-if='ok'>确认收货</button>
		<button class="pingjia"  v-else onclick="javscript:window.location.href='evaluate.html'">立即评价</button>
	</div>
	<script>
		new Vue({
			el:".change",
			data:{
				ok:true,
				shouhuozhangtai:'待收货'
			},
			methods:{
				changeButton:function(){
					this.ok = false;
					this.shouhuozhangtai = '已收货'
				}
			}
		})
	</script>
</body>
</html>